<template>
  <div>
    <el-form
      v-if="searchDom"
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      style="height:62px;"
    >
      <el-form-item label="审批人" class="left">
        <el-input v-model="formInline.user" placeholder="审批人"></el-input>
      </el-form-item>
      <el-form-item label="活动区域" class="left">
        <el-select v-model="formInline.region" placeholder="活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="right">
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-select
        v-model="selectVal"
        multiple
        collapse-tags
        style="margin-left: 20px;"
        @visible-change="selectChange($event)"
        placeholder="请选择"
      >
        <el-option
          v-for="item in options"
          :key="item.field"
          :label="item.label"
          :value="item.field"
        ></el-option>
      </el-select>
      <el-button type="primary" class="right" @click="exportExcel">导出</el-button>
      <el-button type="primary" class="right" @click="onSearch">{{searchLable}}</el-button>
      <el-button type="primary" class="right" @click="onReset">重置</el-button>
      <el-button type="primary" class="right" @click="isClose">排序</el-button>
    </el-row>
    <zTablePlugin :tableData="dataTable" :tableColumn="dataColumn"></zTablePlugin>
    <zExport :tableData="exportTableData" :tableColumn="dataColumn"></zExport>
    <el-dialog title="排序方式" :visible.sync="dialogFormVisible">
      <zSort :sortArray="sortArr" :sortSelect="sortWay" @submitSort="submitSort" @isClose="isClose"></zSort>
    </el-dialog>
  </div>
</template>

<script>
import zTablePlugin from '@/components/tablePlugin'
import zSort from '@/components/sortPlugin'
import zExport from '@/components/zExportPlugin'
export default {
  name: 'demo',
  components: { zTablePlugin, zSort, zExport },
  data() {
    return {
      formInline: {
        user: '',
        region: ''
      },
      selectVal: ['date', 'name', 'address'],
      options: [
        { label: '日期', field: 'date' },
        { label: '姓名', field: 'name' },
        { label: '地址', field: 'address' }
      ],
      // 表格相关参数
      dataTable: {},
      dataColumnCopy: [
        { label: '日期', field: 'date', width: 180 },
        { label: '姓名', field: 'name', width: 180 },
        { label: '地址', field: 'address' }
      ],
      dataColumn: [
        { label: '日期', field: 'date', width: 180 },
        { label: '姓名', field: 'name', width: 180 },
        { label: '地址', field: 'address' }
      ],
      // 导出相关参数
      exportTableData: [],
      //  查询框的隐藏与显示
      searchDom: false,
      searchLable: '显示',
      //  排序相关参数
      dialogFormVisible: false,
      sortArr: [
        { key: '日期', value: 'date' },
        { key: '姓名', value: 'name' },
        { key: '地址', value: 'address' }
      ],
      sortWay: [
        { key: '升序', value: 'desc' },
        { key: '降序', value: 'des' }
      ]
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    onInit() {
      this.$localHttp.get('../../static/json/tableData.json').then(res => {
        console.log(res.data.data)
        console.log(typeof res.data.data)
        if (res.statusText === 'OK') {
          this.dataTable = res.data.data
        }
      })
    },
    onSubmit() {
      this.$ajax.httpGet('/try/ajax/json_demo.json').then(res => {
        console.log(res)
      })
    },
    onReset() {
      this.$ajax.httpPost('/try/ajax/demo_axios_post.php').then(res => {
        console.log(res)
      })
    },
    onSearch() {
      this.searchDom = !this.searchDom
      this.searchLable = this.searchDom ? '隐藏' : '显示'
    },
    isClose() {
      this.dialogFormVisible = !this.dialogFormVisible
    },
    submitSort(e) {
      console.log(e)
      this.isClose()
    },
    selectChange(callback) {
      if (!callback) {
        console.log(this.selectVal)
        this.dataColumn = this.dataColumnCopy.filter(res => {
          return this.selectVal.some(val => {
            return val === res.field
          })
        })
        console.log(this.dataColumn)
      }
    },
    exportExcel() {
      this.$localHttp.get('../../static/json/tableData.json').then(res => {
        console.log(res.data.data)
        console.log(typeof res.data.data)
        if (res.statusText === 'OK') {
          this.exportTableData = res.data.data.data
        }
      })
    },
    async getData() {
      this.onInit()
      // const params = {};
      // const data = this.data;
    }
  }
}
</script>

<style scoped>
.right {
  float: right;
}
.left {
  float: left;
}
</style>
